<template>
  <a-spin :spinning="saveLoading">
    <div class="account-settings-info-view">
      <a-row :gutter="16">
        <a-col :md="24" :lg="16">
          <a-form layout="vertical">
            <a-form-item label="绑定用户">
              <a-input v-model="cloud_username" placeholder="绑定用户" />
            </a-form-item>
            <a-form-item>
              <a-button v-if="is_bind" @click="doUnbind" :loading="saveLoading" type="primary">解绑</a-button>
              <a-button v-else @click="doBind" :loading="saveLoading" type="primary">绑定云平台用户</a-button>
            </a-form-item>
            <a-form-item label="同步数据类型">
              <a-select label-in-value style="width: 120px" @change="handleChange">
                <a-select-option value="class">班级</a-select-option>
                <a-select-option value="teacher">老师</a-select-option>
                <a-select-option value="student">学生</a-select-option>
                <a-select-option value="version">教材版本</a-select-option>
                <a-select-option value="subject">学科</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button @click="submitForm" :loading="saveLoading" type="primary">同步数据</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>
<script>
  import { getBindUser, cloudProxy } from '@/api/login'
  export default {
    data () {
      return {
        saveLoading:false,
        form: this.$form.createForm(this),
		is_bind: false,
		cloud_username: '',
		async_type:''
      }
    },
    mounted(){
      this.fetch()
    },
    methods: {
		doUnbind(){
			const me = this
			cloudProxy({'api_type': 'unbind_user', 'data': {'aaa':'xxx'}}).then(() => {
				me.$notification.success({message: '解绑成功'})
				me.fetch()
            }).catch(err => this.requestFailed(err))
		},
		doBind(){
			const me = this
			cloudProxy({'api_type': 'bind_user', 'data': {'username': this.cloud_username}}).then(() => {
				me.$notification.success({message: '绑定成功'})
				me.fetch()
			}).catch(err => this.requestFailed(err))
		},
		requestFailed(err) {
			this.$notification['error']({
				message: '错误',
				description: ((err || {}).data || {}).msg || '请求出现错误，请稍后再试',
				duration: 4
			})
		},
		submitForm(){
			const me = this
			cloudProxy({'api_type': 'do_sync', 'data': {'async_type': this.async_type}}).then(() => {
				me.$notification.success({message: '数据同步成功'})
			}).catch(err => this.requestFailed(err))
		},
		handleChange(value){
			this.async_type = value.key
		},
      fetch(){
        const that = this
        getBindUser({}).then(res => {
			that.cloud_username = res.data.cloud_username
			if(that.cloud_username){
				that.is_bind = true
			}else{
				that.is_bind = false
			}
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .avatar-upload-wrapper {height: 200px;width: 100%;}
  .ant-upload-preview {
    position: relative;margin: 0 auto;width: 100%;max-width: 180px;border-radius: 50%;box-shadow: 0 0 4px #ccc;
    .upload-icon {
      position: absolute;top: 0;right: 10px;font-size: 1.4rem;padding: 0.5rem;background: rgba(222, 221, 221, 0.7);
      border-radius: 50%;border: 1px solid rgba(0, 0, 0, 0.2);}
    .mask {opacity: 0;position: absolute;background: rgba(0,0,0,0.4);cursor: pointer;transition: opacity 0.4s;
      &:hover {opacity: 1;}
      i {font-size: 2rem;position: absolute;top: 50%;left: 50%;margin-left: -1rem;margin-top: -1rem;color: #d6d6d6;}
    }
    img, .mask {width: 100%;max-width: 180px;height: 100%;border-radius: 50%;overflow: hidden;}
  }
</style>